<template>
  <el-dialog
    :close-on-click-modal="false"
    width="65%"
    :title="title"
    :visible.sync="visible"
    :before-close="close"
    lock-scroll
    append-to-body
  >
    <el-tabs type="card" v-model="activeTab" @tab-click="handleClick">
      <el-tab-pane
        :key="item.name"
        v-for="item in tabs"
        :label="item.title"
        :name="item.name"
      >
        <div :id="item.id" class="echartsBox"></div>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import staNewAPI from "@apis/statisticsNew";
import Option from "@components/echarts-parts/echarts-option";
import { Message } from "element-ui";

export default {
  props: {
    visible: Boolean,
    title: String,
    datas: {
      type: Object,
    },
  },
  data() {
    return {
      loading: false,
      activeTab: "1",
      echartsDatas: {
        xAxis: [],
        data: [],
      },
      tabs: [
        { title: "年度", name: "1", id: "echartsLine1" },
        { title: "季度", name: "2", id: "echartsLine2" },
      ],
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.drawLine("echartsLine1", this.datas, true);
    });
  },
  methods: {
    cancel() {
      this.loading = false;
      this.$emit("update:visible", false);
    },
    close() {
      this.cancel();
    },
    //年度
    getYear(parmars, ele) {
      staNewAPI
        .getStatisticPerson(parmars)
        .then((res) => {
          let month = { xAxis: [], data: [], yAxis: [] };
          res.length > 0 &&
            res.map((item) => {
              month.xAxis.push(item.month);
              month.data.push(item.totalScore);
            });
          if (month.data) {
            month.yAxis.max = Math.max.apply(Math, month.data) * 1 + 2;
            month.yAxis.min = Math.min.apply(Math, month.data) * 1 - 2;
          }

          this.echartsDatas = { ...month };
          this.isNoData(this.echartsDatas, ele);
        })
        .catch((err) => {
          console.log(err, "err");
          this.$message.error(err.message);
        });
    },
    //季度
    getQuarter(parmars, ele) {
      staNewAPI
        .getStatisticQuarterPerson(parmars)
        .then((res) => {
          let quarter = { xAxis: [], data: [], yAxis: [] };
          if (res) {
            if (res.quarterOneScore) {
              quarter.xAxis.push("一季度");
              quarter.data.push(res.quarterOneScore);
            }
            if (res.quarterTwoScore) {
              quarter.xAxis.push("二季度");
              quarter.data.push(res.quarterTwoScore);
            }
            if (res.quarterThreeScore) {
              quarter.xAxis.push("三季度");
              quarter.data.push(res.quarterThreeScore);
            }
            if (res.quarterFourScore) {
              quarter.xAxis.push("四季度");
              quarter.data.push(res.quarterFourScore);
            }
          }

          if (quarter.data) {
            quarter.yAxis.max = Math.max.apply(Math, quarter.data) * 1 + 2;
            quarter.yAxis.min = Math.min.apply(Math, quarter.data) * 1 - 2;
          }
          this.echartsDatas = { ...quarter };
          this.isNoData(this.echartsDatas, ele);
        })
        .catch((err) => {
          console.log(err, "err");
          this.$message.error(err.message);
        });
    },
    //判断是否有数据
    isNoData(data, ele) {
      if (data.data.length > 0) {
        // 基于准备好的dom，初始化echarts实例
        var myChartLine = this.$echarts.init(ele);
        // 绘制图表
        myChartLine.setOption(Option.optionLineBar("", "line", data));
      } else {
        ele.innerHTML = `<div 
        style='text-align: center;color: #909399;
        font-size: 14px;padding-top:50px'
        >
        暂无数据</div>`;
      }
    },
    drawLine(id, data, isYear) {
      let ele = document.getElementById(id);
      if (isYear) {
        this.getYear(data, ele);
      } else {
        this.getQuarter(data, ele);
      }
    },
    handleClick(val) {
      this.activeTab = val.name;
      if (val.name == "1") {
        this.$nextTick(() => {
          this.drawLine("echartsLine1", this.datas, true);
        });
      } else {
        this.$nextTick(() => {
          this.drawLine("echartsLine2", this.datas, false);
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.echartsBox {
  width: 100%;
  height: 200px;
}
</style>